<template>
  <header>
    <div class="container">
      <div class="brand">
        <router-link to="/">Kanata</router-link>
      </div>
      <nav>
        <div class="nav-item">
          <router-link to="/">主页</router-link>
        </div>
        <template v-if="username">
          <div class="nav-item">
            <router-link :to="`/profiles/${username}`">{{username}}</router-link>
          </div>
          <div class="nav-item">
            <router-link to="/create">新建文章</router-link>
          </div>
          <div class="nav-item">
            <router-link to="/settings">个人资料</router-link>
          </div>
        </template>
        <template v-else>
          <div class="nav-item">
            <router-link to="/login">登录</router-link>
          </div>
          <div class="nav-item">
            <router-link to="/register">注册</router-link>
          </div>
        </template>
      </nav>
    </div>
  </header>
</template>

<script lang="ts">

  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  export default defineComponent({
    setup () {
      const store = useStore()
      return {
        username: computed(() => store.state.user.username)
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/variables.scss";
  header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 2px #eee;
  }
  .brand > a {
    color: $linkColor;
  }
  .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav {
    display: flex;
  }
  .nav-item {
    margin-left: 20px;
  }
  .nav-item > a {
    font-size: 14px;
    color: $linkColorLight;
  }
  .nav-item > a.router-link-active {
    color: $linkColorActive;
  }
</style>